<template>
  <div class="exam-detail-container">
    <el-card class="exam-info-card">
      <div class="exam-header">
        <h2>{{ examInfo.name }}</h2>
        <el-tag :type="getStatusType(examInfo.status)">{{ examInfo.status }}</el-tag>
      </div>

      <el-divider />

      <div class="exam-info">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <span class="label"><i class="el-icon-date"></i> 开始时间：</span>
              <span class="value">{{ examInfo.startTime }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label"><i class="el-icon-time"></i> 考试时长：</span>
              <span class="value">{{ examInfo.duration }}分钟</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label"><i class="el-icon-notebook-2"></i> 总分：</span>
              <span class="value">{{ examInfo.totalScore }}分</span>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="8">
            <div class="info-item">
              <span class="label"><i class="el-icon-collection-tag"></i> 科目：</span>
              <span class="value">{{ examInfo.subject }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <span class="label"><i class="el-icon-user"></i> 创建教师：</span>
              <span class="value">{{ examInfo.teacherName }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-divider />

      <div class="exam-rules">
        <h3><i class="el-icon-warning-outline"></i> 考试须知</h3>
        <ul>
          <li>请确保网络环境稳定，考试过程中断网将自动提交试卷</li>
          <li>考试时间到后系统将自动收卷</li>
          <li>考试过程中请勿切换浏览器窗口，否则系统将记录违规次数</li>
          <li>请独立完成考试，不得抄袭或讨论</li>
        </ul>
      </div>

      <div class="exam-actions">
        <el-button 
          type="primary" 
          size="large"
          :disabled="!canStartExam"
          @click="startExam"
        >
          开始考试
        </el-button>
        <div class="exam-countdown" v-if="examInfo.status === '待开始'">
          距离考试开始还有：{{ countdown }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ExamDetail',
  data() {
    return {
      examInfo: {
        id: 1,
        name: '2024年春季期末考试',
        status: '待开始',
        startTime: '2024-04-10 14:30',
        duration: 120,
        totalScore: 100,
        subject: '数学',
        teacherName: '张老师'
      },
      countdown: '2天 3小时 45分钟'
    }
  },
  computed: {
    canStartExam() {
      return this.examInfo.status === '进行中'
    }
  },
  methods: {
    getStatusType(status) {
      const types = {
        '待开始': 'info',
        '进行中': 'success',
        '已结束': ''
      }
      return types[status] || 'info'
    },
    startExam() {
      // 开始考试的逻辑
    }
  }
}
</script>

<style scoped>
.exam-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.exam-info-card {
  margin-bottom: 20px;
}

.exam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.exam-header h2 {
  margin: 0;
  color: #303133;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-item .label {
  color: #909399;
  margin-right: 10px;
}

.info-item .value {
  color: #303133;
  font-weight: 500;
}

.exam-rules {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
}

.exam-rules h3 {
  color: #303133;
  margin-top: 0;
  margin-bottom: 15px;
}

.exam-rules ul {
  margin: 0;
  padding-left: 20px;
}

.exam-rules li {
  color: #606266;
  line-height: 1.8;
}

.exam-actions {
  margin-top: 30px;
  text-align: center;
}

.exam-countdown {
  margin-top: 10px;
  color: #909399;
}

.el-icon-warning-outline {
  color: #e6a23c;
  margin-right: 5px;
}
</style> 